<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script language="javascript"
	src="<%=request.getContextPath()%>/js/jquery-1.4.4.min.js"
	type="text/javascript"></script>
<script language="javascript"
	src="<%=request.getContextPath()%>/js/i18n/grid.locale-cn.js"
	type="text/javascript"></script>
<script language="javascript"
	src="<%=request.getContextPath()%>/js/jquery-ui-1.7.3.custom.min.js"
	type="text/javascript"></script>
<script language="javascript"
	src="<%=request.getContextPath()%>/js/ui.datepicker-zh-CN.js"
	type="text/javascript"></script>
<script language="javascript"
	src="<%=request.getContextPath()%>/js/jquery.jqGrid.min.js"
	type="text/javascript"></script>
<link href="<%=request.getContextPath()%>/css/jquery-ui-1.7.3.custom.cupertino.css" rel="stylesheet"
	type="text/css" />
<link href="<%=request.getContextPath()%>/css/demos.css" rel="stylesheet"
	type="text/css" />
<link href="<%=request.getContextPath()%>/css/ui.jqgrid.css" rel="stylesheet"
	type="text/css" />
<title>Insert title here</title>
</head>
<body>
<a href="<%=request.getContextPath()%>/signIn.beehoo">登陆</a>
<a href="<%=request.getContextPath()%>/userMange.beehoo">查看</a>
<input id="test" name="test" type="text" value="1983-01-01 00:00:00.0">
<br/>
<br />
<table id="listTable"></table>
<div id="pager"></div>
</body>
<script language="javascript" type="text/javascript"> 
    $(function() { 
        $.datepicker.setDefaults( $.datepicker.regional[ "zh-CN" ] ); 
        $("#test").datepicker({changeMonth: true,changeYear: true}); 
        $("#test").datepicker("option","showAnim", "drop" ); 
    }); 
    
    $("#listTable").jqGrid({
        url:'${pageContext.request.contextPath}/signIn.beehoo?method=list',   //获取数据的URL地址   
        datatype: 'json',           //从服务器端返回的数据类型，默认xml。可选类型：xml，local，json，jsonnp，script，xmlstring，jsonstring，clientside   
        mtype: 'GET',               //ajax提交方式。POST或者GET，默认GET   
    	colNames:['编号','姓名', '备注'],//  列显示名称，是一个数组对象。  
       	colModel:[//对显示列属性的设置，是一个数组对象   
                  //name 列显示的名称；index 传到服务器端用来排序用的列名称；width 列宽度；align 对齐方式；sortable  是否可以排序 
       		{name:'id',index:'id', width:55},
       		{name:'userName',index:'userName', width:90},
       		{name:'remark',index:'remark', width:100},
       	],
        postData: {     //此数组内容直接赋值到url上，参数类型：{name1:value1…}   
        },   
        rowNum:5,      //在grid上显示记录条数，这个参数是要被传递到后台. 默认 0   
        rowList:[1,2,5],  //一个下拉选择框，用来改变显示记录数，当选择时会覆盖rowNum参数传递到后台.默认[]   
        height: 200,        //表格高度，可以是数字，像素值或者百分比 默认150   
        autowidth: false,    //  如果为ture时，则当表格在首次被创建时会根据父元素比例重新调整表格宽度,默认false。如果父元素宽度改变，为了使表格宽度能够自动调整则需要实现函数：setGridWidth   
        width: 500,
        rownumbers: true,   //如果为ture则会在表格左边新增一列，显示行顺序号，从1开始递增。此列名为'rn'.默认false.   
        pager: '#pager',    //定义翻页用的导航栏，必须是有效的html元素。翻页工具栏可以放置在html页面任意位置 .默认null   
        sortname: 'id',     //默认的排序列。可以是列名称或者是一个数字，这个参数会被提交到后台 默认"".   
        viewrecords: true,  //定义是否要显示总记录数 默认false.   
        sortorder: "asc",   //排序顺序，升序或者降序（asc or desc） 默认asc.   
        caption:"表格",    //表格名称   
        multiselect: true,  //是否显示多选  默认false   
        emptyrecords: "Empty records", //当返回的数据行数为0时显示的信息。只有当属性 viewrecords 设置为ture时起作用   
        loadonce: false,    ////如果为ture则数据只从服务器端抓取一次，之后所有操作都是在客户端执行，翻页功能会被禁用.默认false   
        loadComplete: function() {   
        },   
        jsonReader : {   
            //描述json 数据格式的数组，参数是固定的,即必须有root,page,total,records   
			root: "rows",  //設定資料欄位陣列是放置在rows這個index之中。 
			page: "page",   //設定目前是第幾頁
			total: "total",   //設定總共有幾頁
			records: "records",   //设定总记录数
            repeatitems: false, 
            cell: "cell",   
            id: "id" 
        }   
    });  
    
</script>
</html>